<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head  th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title >设备详情</title>
	<script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
	<script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
	<link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
	<link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
	<link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
	<th:block th:fragment="supplement">
		<link href="../static/css/jquery.gridly.css" rel="stylesheet" th:href="@{css/jquery.gridly.css}"/>
		<script src="../static/js/jquery.gridly.js" th:src="@{js/jquery.gridly.js}"></script>
		<script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<script src="../static/js/jstree.min.js" th:src="@{js/jstree.min.js}"></script>
		<link rel="stylesheet" href="../static/css/jstree-default/style.min.css"
			  th:href="@{css/jstree-default/style.min.css}">
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
		<style type="text/css">
			/*原生button 有个下外边距*/
			.ui.modal .actions > .button {
				margin-bottom: 0;
			}
			#item_label {
				display: none;
				float: right;
				margin: 20px auto;
			}

			#select_label {
				display: none;
				width: 100px;
			}

			.chart-style {
                height: 160px;
            }
			.gridly {
				position: relative;
				width: 100%;
				margin-left: 10px;
				margin-top: 10px;
			}
			.brick.small {
				height: 200px;
				width: 330px;
			}
			#pointButton{
				height: 180px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
			.ui.celled.grid > .row > .column {  padding: 0.5em  }
			.text-hidden{
				overflow: hidden; /*自动隐藏文字*/
				text-overflow: ellipsis;/*文字隐藏后添加省略号*/
				white-space: nowrap;/*强制不换行*/
			}
			.button_points_hidden{
				overflow: hidden; /*自动隐藏文字*/
				text-overflow: ellipsis;/*文字隐藏后添加省略号*/
				white-space: nowrap;/*强制不换行*/
				width: 10em;/*不允许出现半汉字截断*/
			}
			#hostTree  .ui.buttons {
				margin-bottom: 0px;
			}
            #hostConfiguration .ui.tab.segment {
                height: 180px;
                /*原生tab 有个下边距*/
                margin-bottom: 0px;
            }
			#hostConnection .grid {
				margin-bottom: -12px;
			}
			#hostConnection .grid .buttons {
				height: 15px;
                margin-bottom: 0px;
			}
			#hostConnection .grid .buttons .button {
				padding-top: 0px;
			}
			#hostConnection .grid .buttons .or {
				margin-top: -8px;
			}
			#hostConnection .fields {
				margin-bottom: 0px;
			}
            #pointDetailModal .ui.tab.segment {
                height: 450px;
                width: 100%;
                overflow:auto;
                overflow-x:hidden;
                /*原生tab 有个下边距*/
                margin-bottom: 0px;
            }
            #pointDetailModal .ui.buttons {
                /*原生buttons 有个下边距*/
                margin-bottom: 0px;
            }
            #pointDetailModal table.dataTable.no-footer {
                /*原生dataTable 下外边框颜色是#111*/
                border-bottom: 1px solid #DDDDDD;
            }
            #pointDetailModal .ui.three.column.grid {
                margin: -20px 0 0 0;
            }
            #pointDetailModal .ui.three.column.grid .column {
                margin-bottom: 10px;
            }
			.chart-zoom{
				height: 180px;
				width: 700px;
			}
			#itemZoom {
				height: 200px;
				width: 100%;
			}
			#tableZoom {
				height: 200px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden
			}
		</style>
	</th:block>

</head>
<body>
<!--header start-->
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<a class="title item" href="#">
                <i class="ion-speedometer titleIcon icon"></i>仪表盘
			</a>
			<a class="title item" href="#">
				<i class="ion-ios-lightbulb titleIcon icon"></i>监控视图
			</a>
			<a class="item" href="#">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</a>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备监控<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">设备总览</a>
				<a class="item" href="#">网络设备</a>
				<a class="item" href="#">数据库</a>
				<a class="item" href="#">应用</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</a>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">告警日历</a>
				<a class="item" href="#">告警列表</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</a>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>监控视图</span>
			<i class="ion-ios-lightbulb icon"></i>
			<div class="menu">
				<div class="header">
					监控视图
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备概览</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备概览
				</div>
				<div class="ui divider"></div>
				<a class="item" href="tab.html">服务器</a>
				<a class="item" href="table.html">网络设备</a>
				<a class="item" href="error.html">数据库</a>
				<a class="item" href="login.html">应用</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i>   告警
						<div class="ui red label mini circular">6</div>
						<div class="menu" >
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
                        <img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
                             alt="label-image"/>
						<div class="menu">
							<a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
							<a class="item" href="mail.html" th:href="@{/logout}">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>
				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<div class="sixteen wide column">
					<div class="ui grid">
						<div class="eight wide column">
							<div class="header item">
								<h2><i class="large newspaper icon"></i>设备详情</h2>
							</div>
							<span style="display: none" id="host_id" th:text="${hostDetailVO.hostId}">10110</span>
						</div>
						<div class="eight wide column right aligned" id="hostTree">
							<div class="ui buttons" th:class="${hostDetailVO.state}=='正常' ? 'ui green buttons' : (${hostDetailVO.state}=='警告' ? 'ui yellow buttons' : 'ui red buttons')  "  >
								<div class="ui button" th:text="${hostDetailVO.hostName}">保存</div>
								<div class="ui floating dropdown icon button" id="host_select_dropdown">
									<i class="dropdown icon"></i>
									<div class="menu">
										<div class="item" data-value="host"><i class="edit icon"></i> 更改设备</div>
									</div>
								</div>
							</div>
						</div>
						<div class="sixteen wide column" style="padding-top: 0px">
							<div class="ui segment">
								<div class="ui grid">
									<div class="five wide column" id="hostConfiguration">
										<div class="ui top attached tabular menu">
											<a class="active item" data-tab="first"><h3>配置详情</h3></a>
											<a class="item" data-tab="second"><h3>连接详情</h3></a>
										</div>
										<div class="ui bottom attached active tab segment" data-tab="first">
											<div class="ui internally celled grid">
												<div class="row">
													<div class="eight wide center aligned column">
														<p>设备名: </p>
													</div>
													<div class="eight wide column">
														<span th:text="${hostDetailVO.hostName}">设备名称</span>
													</div>
												</div>
												<div class="row ">
													<div class="eight wide center aligned column">
														<span>IP: </span>
													</div>
													<div class="eight wide column">
														<span th:text="${hostDetailVO.ip}">ip</span>
													</div>
												</div>
												<div class="row">
													<div class="eight wide center aligned column">
														<span>类型:</span>
													</div>
													<div class="eight wide column">
														<span th:text="${hostDetailVO.type}">type</span>
													</div>
												</div>
												<div class="row">
													<div class="sixteen wide column">
														<span>描述:</span><br>
														<span th:text="${hostDetailVO.description}">包含一个简单的表格列出设备等信息;</br>部分信息可以伸缩隐藏，例如四种配置接口等数据</span>
													</div>
												</div>
											</div>
										</div>
										<div class="ui bottom attached tab segment" id="hostConnection" data-tab="second">
											<div class="ui relaxed divided list">
												<div class="item">
													<div class="content">
														<div class="ui grid">
															<div class="eight wide column">
																<p class="header">Agent方式</p>
															</div>
															<div class="eight wide column right aligned">
																<div class="ui buttons">
																	<button id="agent_ip_btn" class="ui button">IP</button>
																	<div class="or" data-text="或"></div>
																	<button id="agent_dns_btn" class="ui button">DNS</button>
																</div>
															</div>
														</div>
														<div class="description">
															<div class="ui form">
																<div class="inline fields">
																	<div class="field" id="agent_ip">
																		IP:
																		<span ></span>
																	</div>
																	<div class="field" id="agent_dns">
																		DNS:
																		<span ></span>
																	</div>
																	<div class="field" id="agent_port">
																		端口号:
																		<span ></span>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="content">
														<div class="ui grid">
															<div class="eight wide column">
																<p class="header">SNMP方式</p>
															</div>
															<div class="eight wide column right aligned">
																<div class="ui buttons">
																	<button id="snmp_ip_btn" class="ui button">IP</button>
																	<div class="or" data-text="或"></div>
																	<button id="snmp_dns_btn" class="ui button">DNS</button>
																</div>
															</div>
														</div>
														<div class="description">
															<div class="ui form">
																<div class="inline fields">
																	<div class="field" id="snmp_ip">
																		IP:
																		<span ></span>
																	</div>
																	<div class="field" id="snmp_dns">
																		DNS:
																		<span ></span>

																	</div>
																	<div class="field" id="snmp_port">
																		端口号:
																		<span ></span>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="content">
														<div class="ui grid">
															<div class="eight wide column">
																<p class="header">IPMI方式</p>
															</div>
															<div class="eight wide column right aligned">
																<div class="ui buttons">
																	<button id="ipmi_ip_btn" class="ui button">IP</button>
																	<div class="or" data-text="或"></div>
																	<button id="ipmi_dns_btn" class="ui button">DNS</button>
																</div>
															</div>
														</div>
														<div class="ui description">
															<div class="ui form">
																<div class="inline fields">
																	<div class="field" id="ipmi_ip" >
																		IP:
																		<span ></span>
																	</div>
																	<div class="field" id="ipmi_dns">
																		DNS:
																		<span ></span>

																	</div>
																	<div class="field" id="ipmi_port">
																		端口号:
																		<span ></span>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="content">
														<div class="ui grid">
															<div class="eight wide column">
																<p class="header">JMX方式</p>
															</div>
															<div class="eight wide column right aligned">
																<div class="ui buttons">
																	<button id="jmx_ip_btn" class="ui button">IP</button>
																	<div class="or" data-text="或"></div>
																	<button id="jmx_dns_btn" class="ui button">DNS</button>
																</div>
															</div>
														</div>
														<div class="description">
															<div class="ui form">
																<div class="inline fields no_margin_bottom">
																	<div class="field" id="jmx_ip">
																		IP:
																		<span ></span>
																	</div>
																	<div class="field" id="jmx_dns">
																		DNS:
																		<span  ></span>

																	</div>
																	<div class="field" id="jmx_port">
																		端口号:
																		<span ></span>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="eleven wide column">
										<div class="ui segments">
											<div class="ui segment">
												<h3 class="ui header">
													监控点详情
												</h3>
											</div>
											<div class="ui segment">
												<div class="ui five column grid fixed-height" id="pointButton">
													<div class="column" th:each="pointVO : ${pointVOS}">
														<div class="ui red top attached button" id="" th:class="${pointVO.state}=='正常' ? 'ui green top attached button text-hidden' : (${pointVO.state}=='警告' ? 'ui yellow top attached button text-hidden' : 'ui red top attached button text-hidden')  " th:id="p+${pointVO.pointId}" th:text="${pointVO.name}">CPU</div>
													</div>
													<div class="column" th:remove="all">
														<div class="ui red top attached button" id="0114" >CPU</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row" style="padding-top:0px; min-height : 220px;">
								<div class="column">
								</div>
								<div id="flag_true" >
									<div class="ui segments">
										<div class="ui segment">
											<div class="ui grid">
												<div class="eight wide column">
													<h3 class="ui header">
														<i class="tag icon"></i>
														自定义图形
													</h3>
												</div>
												<div class="eight wide column right aligned">
													<a class="header item addItems">
														<i class="add icon"></i>添加
													</a>
												</div>
											</div>
										</div>
										<div class="ui segment">
											<div class="gridly" id="flag_true_content"></div>
											<div id="custom-dimmer" class="ui inverted dimmer">
												<div class="ui text loader">正在加载</div>
											</div>
										</div>
									</div>
									<div id="flag_false"></div>
								</div>
							</div>
						</div>
					</div>
				</div>

					<!--监控点详情页-->

					<div th:fragment="point_detail_page" class="ui large coupled modal" id="pointDetailModal">
						<div class="ui dimmer" id="pointDimmer"></div>
						<span style="display:none" id="pointDetailArea"></span>
						<span style="display:none" id="pointDetailFirstItem"></span>
						<i class="close icon"></i>
						<!--监控点modal start-->
						<div class="content">
						     <div class="ui grid points">
                                <div id="labelPoints"></div>
                                <div class="sixteen wide column">
                                    <div class="ui pointing secondary menu tab_points">
                                        <a class="item active" data-tab="Summary">概述</a>
                                        <a class="item" data-tab="Report">报告</a>
                                        <a class="item" data-tab="Data">数据</a>
                                    </div>
                                    <div class="ui tab segment active" data-tab="Summary">
                                        <table class="ui compact basic fixed single line table center aligned">
                                            <thead>
                                            <tr><th width="25%" class='left aligned'>指标</th>
                                                <th width="25%" class='left aligned'>值</th>
                                                <th width="15%">危险阈值</th>
                                                <th width="15%">故障阈值</th>
                                                <th width="20%">最新时间</th>
                                            </tr></thead>
                                            <tbody id="tableSummary" >
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="ui tab segment" data-tab="Report">
                                        <div class="ui grid">
                                            <div class="eight wide column">
                                                <div class="ui basic top attached left floated  buttons Time Report">
                                                    <button value="40" class="ui active button">最新40条</button>
                                                    <button value="1" class="ui button">1天</button>
                                                    <button value="3" class="ui button">3天</button>
                                                    <button value="7" class="ui button">7天</button>
                                                    <button value="30" class="ui button">30天</button>
                                                </div>
                                            </div>
                                            <div class="eight wide column">
                                                <div class="ui basic top attached right floated buttons Type Report" id="typeReport">
                                                    <button value="bar" class="ui button">柱状图</button>
                                                    <button value="line" class="ui button">线状图</button>
                                                    <button value="area" class="ui button">面积图</button>
                                                </div>
                                            </div>
                                            <div class="sixteen wide column"></div>
                                        </div>
                                        <div class="row">
                                            <div class="ui three column grid" id="chartReport">
                                                <p></p>
                                            </div>
                                        </div>
                                        <div id="chart-dimmer" class="ui inverted dimmer">
                                            <div class="ui text loader">正在查询</div>
                                        </div>
                                    </div>
                                    <div class="ui tab segment" data-tab="Data">
                                        <div class="ui grid">
                                            <div class="eight wide column">
                                                <div class="ui basic top attached left floated buttons Time Data">
                                                    <button value="40" class="ui active button">最新40条</button>
                                                    <button value="1" class="ui button">1天</button>
                                                    <button value="3" class="ui button">3天</button>
                                                    <button value="7" class="ui button">7天</button>
                                                    <button value="30" class="ui button">30天</button>
                                                </div>
                                            </div>
                                            <div class="right aligned four wide column">
                                                监控项：
												<div id="itemdata_select" class="ui selection dropdown">
													<!--<input type="hidden" name="hosts">-->
													<i class="dropdown icon"></i>
													<div class="text"></div>
													<div class="menu"  id="itemdata_menu">

													</div>
												</div>
                                            </div>
                                            <div class="right aligned four wide column">
                                                状态：
                                                <select class="ui dropdown stateTab">
                                                    <option value="">请选择状态</option>
                                                    <option>全部</option>
                                                    <option>正常</option>
                                                    <option>严重</option>
                                                    <option>警告</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row" id="rowData">

                                        </div>
                                        <div id="data-dimmer" class="ui inverted dimmer">
                                            <div class="ui text loader">正在查询</div>
                                        </div>
                                    </div>
                                </div>
						    </div>
                        </div>
						<!--监控点modal end-->

					</div>

					<!--modal-->
					<div th:fragment="graph_conf_page" class="ui small modal" id="graphConfModal">
						<i class="close icon"></i>
						<div class="header">
							监控项图形
						</div>
						<div class="image content" style="padding-left: 150px;">
							<div class="ui left floated image">
								<form class="ui form">
								<div class="required field" id="graphTitle" >
									<label>请定义图形的标题：</label>
									<p></p>
									<div class="ui small input" >
										<input type="text" placeholder="请输入标题" id="graphName">
									</div>
								</div>
								</form>
								<div id="chart_icon">
								<i class="massive area chart icon"></i>
								</div>
							</div>
							<div class="description">
								请选择图形的内容：
								<p></p>
								<form class="ui form">
									<div class="required inline field" id="graphPoints">
										<label>监控点：</label>
										<select class="ui dropdown points">
											<option value="">请选择监控点</option>
										</select>
									</div>
									<div class="required inline field" id="graphItems">
										<label>监控项：</label>
										<select class="ui dropdown items">
											<option value="">请选择监控项</option>
										</select>
										<div class="ui left pointing red basic label" id="item_label" style="display: none;float: right;margin: 20px auto;">已添加过该监控项</div>
									</div>

									<div class="required inline field" id="graphType">
										<label>图类别：</label>
										<select class="ui dropdown type">
											<option value="">请选择图类别</option>
										</select>
									</div>
								</form>
							</div>
						</div>
						<div class="actions">
							<div class="ui button deny">取消</div>
							<div class="ui green button approve">确认</div>
						</div>
					</div>
					<!--设备树弹出框 start-->
					<div class="ui tiny modal page" id="host_tree_modal">
						<div class="header">
							<label>选择设备</label>
							<div class="ui left pointing red basic label" id="select_label" >必须选择设备</div>
						</div>
						<i class="close icon"></i>
						<div class="content" style="min-height: 200px">
							<div id="host_tree"></div>
						</div>
						<div class="actions">
							<div class="ui cancel button">取消</div>
							<div class="ui green button approve">确认</div>
						</div>
					</div>
					<!--删除弹出框-->
					<div  th:replace="monitorview::delete_page"></div>
				<!--放大监控项图形弹出框-->
				<div  th:replace="platformdetail::item_detail_page"></div>
				<!--Site Content-->
			</div>
		</div>
		<!--maincontent-->
	</div>
</div>
</div>
<th:block th:replace="layout::bottom_script(~{::specialScript})">
	<script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
	<script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
	<script src="../static/js/main.js" th:src="@{js/main.js}"></script>
	<th:block th:fragment="specialScript">
		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/custom/pointModal.js" th:src="@{js/pointModal.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
		<script src="../static/js/custom/choose-hosts.js" th:src="@{js/custom/choose-hosts.js}"></script>
		<script src="../static/js/custom/item-modal.js" th:src="@{js/custom/item-modal.js}"></script>
	</th:block>
</th:block>
<script type="text/javascript">

	//加载hostInterface 静态数据
    $.ajax({
        type: "get",
        url: "/hostdetail/get_interface?host_id=" + $('#host_id').text(),
        dataType: "json",
        contentType: 'application/json',
        success: function (result) {
            if (result.success) {
                var interface_vo = result.data;
                //agent
				$('#agent_port span').text(interface_vo.agent_port);
                if(interface_vo.agent_useip) {
					$('#agent_ip_btn').addClass('positive');
                    $('#agent_ip').show();
                    $('#agent_dns').hide();
					$('#agent_ip span').text(interface_vo.agent_ip);

				}else {
                    $('#agent_dns_btn').addClass('positive');
                    $('#agent_ip').hide();
                    $('#agent_dns').show();
                    var agent_dns = interface_vo.agent_dns;
                    $('#agent_dns span').text(agent_dns.substring(0,10));
				}

				//snmp
                $('#snmp_port span').text(interface_vo.snmp_port);

                if(interface_vo.snmp_useip) {
                    $('#snmp_ip_btn').addClass('positive');
                    $('#snmp_ip').show();
                    $('#snmp_dns').hide();
                    $('#snmp_ip span').text(interface_vo.snmp_ip);

                }else {
                    $('#snmp_dns_btn').addClass('positive');
                    $('#snmp_ip').hide();
                    $('#snmp_dns').show();
                    var snmp_dns = interface_vo.snmp_dns;
                    $('#snmp_dns span').text(snmp_dns.substring(0,10));
                }
                
                //ipmi
                $('#ipmi_port span').text(interface_vo.ipmi_port);
                if(interface_vo.ipmi_useip) {
                    $('#ipmi_ip_btn').addClass('positive');
                    $('#ipmi_ip').show();
                    $('#ipmi_dns').hide();
                    $('#ipmi_ip span').text(interface_vo.ipmi_ip);

                }else {
                    $('#ipmi_dns_btn').addClass('positive');
                    $('#ipmi_ip').hide();
                    $('#ipmi_dns').show();
                    var ipmi_dns = interface_vo.ipmi_dns;
                    $('#ipmi_dns span').text(ipmi_dns.substring(0,10));
                }

				//jmx
                $('#jmx_port span').text(interface_vo.jmx_port);
                if(interface_vo.jmx_useip) {
                    $('#jmx_ip_btn').addClass('positive');
                    $('#jmx_ip').show();
                    $('#jmx_dns').hide();
                    $('#jmx_ip span').text(interface_vo.jmx_ip);

                }else {
                    $('#jmx_dns_btn').addClass('positive');
                    $('#jmx_ip').hide();
                    $('#jmx_dns').show();
                    var jmx_dns = interface_vo.jmx_dns;
                    $('#jmx_dns span').text(jmx_dns.substring(0,10));
                }

                //绑定事件
				$('#agent_ip_btn').on('click',function(){
				    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#agent_dns_btn').removeClass('positive');
                        $('#agent_ip').show();
						$('#agent_dns').hide();

					}

				});
                $('#agent_dns_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {
                        $(this).addClass('positive');
                        $('#agent_ip_btn').removeClass('positive');
                        $('#agent_dns').show();
                        $('#agent_ip').hide();

                    }
                });
                $('#snmp_ip_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#snmp_dns_btn').removeClass('positive');
                        $('#snmp_ip').show();
                        $('#snmp_dns').hide();

                    }
                });
                $('#snmp_dns_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#snmp_ip_btn').removeClass('positive');
                        $('#snmp_dns').show();
                        $('#snmp_ip').hide();

                    }
                });
                $('#ipmi_ip_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#ipmi_dns_btn').removeClass('positive');
                        $('#ipmi_ip').show();
                        $('#ipmi_dns').hide();

                    }
                });
                $('#ipmi_dns_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#ipmi_ip_btn').removeClass('positive');
                        $('#ipmi_dns').show();
                        $('#ipmi_ip').hide();

                    }
                });
                $('#jmx_ip_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#jmx_dns_btn').removeClass('positive');
                        $('#jmx_ip').show();
                        $('#jmx_dns').hide();

                    }
                });
                $('#jmx_dns_btn').on('click',function(){
                    if(!$(this).hasClass('positive')) {

                        $(this).addClass('positive');
                        $('#jmx_ip_btn').removeClass('positive');
                        $('#jmx_dns').show();
                        $('#jmx_ip').hide();

                    }
                });
            }
            else {
                errorMsg_no_data("主机接口信息 问题");
            }
        },
        error: function () {
            errorMsg_no_connect("主机接口信息 问题");
        }
    });

	//页面加载完之后加载js
	$(function() {
	    //初始化下拉框

        //加载监控项的图形
        loadHostGraph();
        //点击添加监控项
        $('a.addItems').on('click', function (e) {
            var host_id = $('#host_id').text();

            //用于赋值
            var graph_type = '',
           		point_id = '',
				item_id = '';
			//用于校验
            var success = true;
            var is_name = true,
                is_point = true,
                is_item = true,
                is_type = true;

            $('#graphConfModal').modal({
                closable: false,
                autofocus: false,
				onShow:function() {

                    //初始化 清除样式
                    $('#graphTitle').removeClass('error')
                    $('#graphPoints').removeClass('error')
                    $('#graphItems').removeClass('error')
                    $('#graphType').removeClass('error')
                    $(".dropdown.points.selection").removeClass('disabled');
                    $(".dropdown.items.selection").removeClass('disabled');

					//清除内容
                    $("#graphName").val('');
                    $(".dropdown.points select").dropdown('clear');
                    $(".dropdown.items select").dropdown('clear');
                    $(".dropdown.type select").dropdown('clear');
                    dropdownPoints(host_id);
					//绑定事件
                    $('#graphName').on('blur',function() {
                        //name 校验
                        if ($('#graphName').val() === '') {
                            $('#graphTitle').addClass('error');
                            is_name = false;
                            //console.log('name empty');
                        }else {
                            $('#graphTitle').removeClass('error');
                            is_name = true;
                            //console.log('name ok');
                        }
					});

                    $('.dropdown.points').dropdown({
						onChange: function (value, text, $selectedItem) {
							point_id = value;
							$('#graphPoints').find('.text').text(text.substr(0,25));
							//point 校验
							if (point_id === '') {
								$('#graphPoints').addClass('error');
								is_point = false;
								//console.log('point empty');
							}else {
								$('#graphPoints').removeClass('error');
								is_point = true;
								//console.log('point ok');
							}
							$(".dropdown.items select").dropdown('clear');
							dropdownItems(value);
						}
					});

                    $('.dropdown.items').dropdown({
						onChange: function (value, text, $selectedItem) {
                            $('#graphItems').find('.text').text(text.substr(0,25));
							item_id = value.split("_")[1];
							//item 校验
							if (item_id === '') {
								$('#graphItems').addClass('error');
								$('#item_label').css('display','none');
								is_item = false;
								//console.log('item empty');
							}else if ($("#i" + item_id).length > 0) {
								//校验判断 页面上是否已经存在相同监控项的图形了
								$('#item_label').css('display','block');
								$('#graphItems').addClass('error');
								is_item = false;
								//console.log('item exist');
							}else {
								$('#graphItems').removeClass('error');
								$('#item_label').css('display','none');
								is_item = true;
								//console.log('item ok');
							}
							$(".dropdown.type select").dropdown('clear');
							dropdownType(value.split("_")[0]);
						}
					});

                    $('.dropdown.type').dropdown({
						onChange: function (value, text, $selectedItem) {
							graph_type = value;
							//type 校验
							if (graph_type === '') {
								$('#graphType').addClass('error');
								is_type = false;
								//console.log('type empty');
							}else {
								$('#graphType').removeClass('error');
								is_type = true;
								//console.log('type ok');
							}
							$("#chart_icon").html("<i class='massive " + value + " chart icon'></i>");
						}
					});
				},
                onApprove: function () {
					//point 校验
                    if (point_id === '') {
                        $('#graphPoints').addClass('error');
                        is_point = false;
                        //console.log('point empty');
                    }else {
                        $('#graphPoints').removeClass('error');
                        is_point = true;
                        //console.log('point ok');
                    }
                    //item 校验
                    if (item_id === '') {
                        $('#graphItems').addClass('error');
                        $('#item_label').css('display','none');
                        is_item = false;
                        //console.log('item empty');
                    }else if ($("#i" + item_id).length > 0) {
                        //校验判断 页面上是否已经存在相同监控项的图形了
                        $('#item_label').css('display','block');
                        $('#graphItems').addClass('error');
                        is_item = false;
                        //console.log('item exist');
                    }else {
                        $('#graphItems').removeClass('error');
                        $('#item_label').css('display','none');
                        is_item = true;
                        //console.log('item ok');
                    }
                    //type 校验
                    if (graph_type === '') {
                        $('#graphType').addClass('error');
                        is_type = false;
                        //console.log('type empty');
                    }else {
                        $('#graphType').removeClass('error');
                        is_type = true;
                        //console.log('type ok');
                    }

                    success = is_name && is_point && is_item && is_type ;
                    //console.log(success);
                    if(success) {
                        $('#custom-dimmer').addClass('active');
                        $('.button.approve').addClass('loading');
                        var dataInfo = {
                            graphName: $('#graphName').val(),
                            graphType: graph_type,
                            hostId: $('#host_id').text(),
                            itemId: item_id
                        };
                        $.ajax({
                            type: "post",
                            url: "/hostgraphs/save_graph",
                            data: JSON.stringify(dataInfo),
                            dataType: "json",
                            contentType: 'application/json',
                            success: function (result) {
                                if (result.success) {
                                    $('.button.approve').removeClass('loading')
                                    hostgraphs(result);
                                    $('#graphConfModal').modal('hide');
                                } else {
                                    $('.button.approve').removeClass('loading')
                                    $('#graphConfModal').modal('hide')
                                    errorMsg_no_data("监控项 Modal");
                                }
                                return true;
                            },
                            error: function () {
                                errorMsg_no_connect("监控项 Modal");
                            }
                        });
					}else {
                        return  false;
					}
                },
            }).modal('show')
        });
        //选择设备下拉框
        $('#host_select_dropdown').dropdown({
            action: function (text, value) {
                if (value === 'host') {
                    var host_id,
						tree_type;
                    var $host_tree;
                    var is_host = false;

                    $('#host_tree_modal').modal({
                        closable  : false,
                        onShow:function(){
                            //获取设备选择树
                            $host_tree = $('#host_tree');
                            var select_host = [$("#host_id").text()];
                            $host_tree.genHostTree({
                                multi: false,
                                initHosts: select_host,
                                onChange:function(e,data){

                                    host_id = data.selected[0];

                                    tree_type = $host_tree.jstree(true).get_type(host_id).split('-')[0];

                                    if('host' === tree_type) {

                                        is_host = true;
                                        $('#select_label').css('display','none');

                                    }else if('group' === tree_type) {

                                        is_host = false;
                                        $('#select_label').css('display','block');

                                    }
                                }
                            })
                        },
                        onApprove : function() {
                            host_id = $host_tree.jstree(true).get_selected()[0];
                            //console.log(host_id,is_host);
                            if(typeof host_id === 'undefined') {
                                is_host =false;
                                $('#select_label').css('display','block');
							}
                            if(is_host) {
                                window.location.href="hostDetail?host_id="+host_id;
							}else {
                                return false;
							}
						}
                    }).modal('show')
                }
            }
		})
	})

    //修改图形 function
    function editGraph(id) {
        var host_id = $("#host_id").text();
        var item_id = id.substring(1);
        //用于赋值
        var item_name = "",
			point_id = "",
			point_name = "",
			graph_name = "",
			graph_type = "",
			graph_value = "",
			value_type = "";
		//用于校验
        var success = true;
        var is_name = true,
            is_type = true;

        $('#graphConfModal').modal({
            closable  : false,
            onShow: function() {
                $.ajax({
                    type: "get",
                    url: "/hostgraphs/get_itemgraph?item_id="+item_id,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var graph_data = result.data;
                            item_name = graph_data.item_name;
                            point_id = graph_data.point_id;
                            point_name = graph_data.point_name;
                            graph_name = graph_data.graph_name;
                            graph_type = graph_data.graph_type;
                            graph_value = graph_data.graph_value;
                            value_type = graph_data.value_type;

                            dropdownType(value_type);
                            //初始化
                            $("#graphName").val(graph_name);
                            $(".dropdown.points select").dropdown("set value", point_id);
                            $(".dropdown.points select").dropdown("set text", point_name);
                            $(".dropdown.items select").dropdown("set value", value_type + "_" + item_id);
                            $(".dropdown.items select").dropdown("set text", item_name);
                            $(".dropdown.type select").dropdown("set value", graph_type);
                            $(".dropdown.type select").dropdown("set text", graph_value);

                            //初始化 清除样式
                            $('#graphTitle').removeClass('error')
                            $('#graphPoints').removeClass('error')
                            $('#graphItems').removeClass('error')
                            $('#graphType').removeClass('error')

                            $(".dropdown.points.selection").addClass('disabled');
                            $(".dropdown.items.selection").addClass('disabled');

                            $(".dropdown.type").dropdown({
                                    onChange: function(value, text, $selectedItem) {
                                        graph_type = value;
                                        if (graph_type === '') {
                                            $('#graphType').addClass('error');
                                            is_type = false;
                                            //console.log('type empty');
                                        }else {
                                            $('#graphType').removeClass('error');
                                            is_type = true;
                                            //console.log('type ok');
                                        }
                                        $("#chart_icon").html("<i class='massive "+value+" chart icon'></i>");
                                    }
                                });

                            $('#graphName').on('blur',function() {

                                if ($('#graphName').val() === '') {
                                    $('#graphTitle').addClass('error');
                                    is_name = false;
                                    //console.log('name empty');
                                }else {
                                    $('#graphTitle').removeClass('error');
                                    is_name = true;
                                    //console.log('name ok');
                                }
							});

                        }
                        else {
                            errorMsg_no_data("监控项 Chart");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("监控项 Chart");
                    }
                });
            },
            onApprove: function () {

                if ($('#graphName').val() === '') {
                    $('#graphTitle').addClass('error');
                    is_name = false;
                    //console.log('name empty');
                }else {
                    $('#graphTitle').removeClass('error');
                    is_name = true;
                    //console.log('name ok');
                }
                if (graph_type === '') {
                    $('#graphType').addClass('error');
                    is_type = false;
                    //console.log('type empty');
                }else {
                    $('#graphType').removeClass('error');
                    is_type = true;//console.log('type ok');
                }
                success = is_name && is_type ;
                if(success) {
                    $('.button.approve').addClass('loading');
                    $('#custom-dimmer').addClass('active');
                    var dataInfo = {
                        graphName: $('#graphName').val(),
                        graphType: graph_type,
                        hostId: host_id,
                        itemId: item_id
                    };

                    $.ajax({
                        type: "post",
                        url: "/hostgraphs/update_graph",
                        data: JSON.stringify(dataInfo),
                        dataType: "json",
                        contentType : 'application/json',
                        success: function (result) {
                            if(result.success) {
                                $('.button.approve').removeClass('loading');
                                hostgraphs(result);
                                $('#graphConfModal').modal('hide');
                            } else {
                                $('.button.approve').removeClass('loading');
                                $('#graphConfModal').modal('hide');
                                errorMsg_no_data("监控项 Modal");
                            }
                            return true;
                        },
                        error: function () {
                            errorMsg_no_connect("监控项 Modal");
                        }
                    });
                }else {
                    return false;
                }
            }
        }).modal('setting', 'closable', false).modal('show');


    }
    //删除图形 function
    function deleteGraph(id) {
        $('#deleteModal').modal({
            closable: false,
            onApprove: function () {
				var host_id = $("#host_id").text();
				var item_id = id.substring(1);
				$('#custom-dimmer').addClass('active');
				$.ajax({
					type: "get",
					url: "/hostgraphs/delete_graph?item_id="+item_id+"&host_id="+host_id,
					dataType: "json",
					success: function (result) {
						if(result.success) {
                            /*无效
                            $("#backDeleteModal").modal({
                                inverted: true
                            }).modal('show');
                            setTimeout("$('#backDeleteModal').modal('hide');",800)*/
							hostgraphs(result);
						}
						else {
                            errorMsg_no_data(result.message);
						}
					},
					error: function () {
						errorMsg_no_connect("监控项 Chart");
					}
                });
            }
        })
        $('#deleteModal').modal('show');
    }

	//页面加载完后加载监控项的图形
	function loadHostGraph() {
        var host_id = $("#host_id").text();
        $('#custom-dimmer').addClass('active');
        $.ajax({
            type: "get",
            url: "/hostgraphs?host_id="+host_id,
            dataType: "json",
            success: function (result) {
                if(result.success) {
                    hostgraphs(result);
                }
                else {
                    errorMsg_no_data("监控项 Chart");
                }
            },
            error: function () {
                errorMsg_no_connect("监控项 Chart");
            }
        }).done(function() {
            $('#custom-dimmer').removeClass('active');
		});
	}

	//绘制设备详情中 监控项图形
    function hostgraphs(result) {
        var data = result.data;
        var str_true = "";
        var str_false = "";
        $("#flag_false").empty();
        $("#flag_true_content").empty();
        for (var i=0; i<data.length; i++){
            var graph_name = data[i].graph_name;
            var name;
			var title;
            if(data[i].units == "") {
                title = graph_name;
            }else {
                title =graph_name + "(" + data[i].units +")";
            }
            if(strlen(title) > 40)
            {
                name = "<div class='twelve wide column no-padding' data-tooltip='"+title+"'>"+
                    "<h3 class='text-hidden'>&nbsp&nbsp&nbsp"+title+"</h3></div>";
            }else {
                name = "<div class='twelve wide column no-padding'>"+
                    "<h3 class='text-hidden'>&nbsp&nbsp&nbsp"+title+"</h3></div>";
            }
            var id = "i" + data[i].item_id;
            if (data[i].flag==true)
            {
                str_true ="<div class=' brick small'><div class='ui grid'>"+name+
                    "<div class='four wide column right aligned no-padding'>"+
                    "<i class='zoom icon' id='z" + data[i].item_id + "' onclick='zoom_graph(this.id)'></i>"+
                    "<i class='edit icon' id='g" + data[i].item_id + "' onclick='editGraph(this.id)'></i>"+
                    "<i class='delete icon' id='g" + data[i].item_id + "' onclick='deleteGraph(this.id)'></i></div>"+
                    "<div class='sixteen wide column no-padding'>"+
                    "<div id='"+id+"' class='chart-style'>"+id+"</div></div></div></div>";
                $("#flag_true_content").append(str_true);
            }
            if(data[i].flag==false){
                if($("#flag_false").children().length == 0)
                {
                    $("#flag_false").html("<div class='ui segments'> <div class='ui segment'> <h3 class='ui header'><i class='tag icon'></i> 问题图形 </h3> </div> <div class='ui segment'><div class='gridly' id='flag_false_content'></div></div></div>");

                }
                str_false ="<div class=' brick small'><div class='ui grid'>"+ name+
                    "<div class='sixteen wide column no-padding'>"+
                    "<div id='"+id+"' class='chart-style'>"+id+"</div></div></div></div>";
                $("#flag_false_content").append(str_false);
            }
            var Color = ['#5FB878', '#DB2828', '#F7B824', '#d2d2d2', '#2F4056'];
            if (data[i].state == "正常"){ var myColor = Color[0] }
            if (data[i].state == "严重"){ var myColor = Color[1] }
            if (data[i].state == "警告"){ var myColor = Color[2] }

            var myChart = echarts.init(document.getElementById(id));
            var option ;
            var colorGreen = [0.6, '#5FB878'];
            var colorYellow = [0.8, '#F7B824'];
            var colorRed = [1, '#FF5722'];
            if(data[i].units == "%"){
                var ymax = 100;
			}else {
                var ymax = null;
			}
			//图形值
            switch (data[i].graph_type) {
                case "gauge":
					option = {
						 title: {
						 },
						 tooltip : {
							 formatter: "{a} <br/>{b} : {c}%"
							 },
						 series: [
							 {
							 name: data[i].item_name,
							 type: 'gauge',
							 min:0,
							 max:100,
							 splitNumber: 5,
							 axisLine: {            // 坐标轴线
							 lineStyle: {       // 属性lineStyle控制线条样式
								 color: [colorGreen,colorYellow,colorRed],
								 width: 13
								 }
							 },
							 axisTick: {            // 坐标轴小标记
								 length: 18,        // 属性length控制线长
								 lineStyle: {       // 属性lineStyle控制线条样式
									 color: 'auto'
									 }
							 },
							 splitLine: {           // 分隔线
								 length: 22,         // 属性length控制线长
								 lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
									 color: 'auto'
									 }
							 },
							 pointer: {
								 width:5
							 },
							 detail: {
							     formatter:'{value}%',
								 offsetCenter:[0,'60%'],
								 textStyle: {
									 fontWeight: 'bolder', fontSize: 16,color: '#333',
								 }},
								 data: [{value: data[i].data[data[i].data.length-1], name: ''}]
							 }
						 ]
					 };
                    break;
                case "area":
                    option = {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        legend: {
                            data:[]
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '0%',
                            top:'5%',
                            containLabel: true
                        },
                        xAxis: {
                            data: data[i].data_time
                        },
                        yAxis: {
                            max: ymax,
                        },
                        series: [{
                            name: data[i].item_name,
                            type: 'line',
                            data: data[i].data,
                            areaStyle: {
                                normal: { }
                            },
                            color: [myColor]
                        }]
                    };
                    break;
                default:
                    option = {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        legend: {
                            data:[]
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '0%',
                            top:'5%',
                            containLabel: true
                        },
                        xAxis: {
                            data: data[i].data_time
                        },
                        yAxis: {
                            max: ymax,
                            splitLine:{show: false},
                        },
                        series: [{
                            name: data[i].item_name,
                            type: data[i].graph_type,
                            data: data[i].data,
                            color: [myColor],
                        }]
                    };
            }
            myChart.setOption(option);

        }
        $('#custom-dimmer').removeClass('active');
        $('.gridly').gridly({
            base: 60, // px
            gutter: 15, // px
            columns: 18
        });
    }

</script>
</body>
</html>